<template>
  <div>
    <div class="Maximal">
      <div>
        <choice @Appear="Appear" ref="type" :title="title" mark="typeMenu" :show="show" />
        <choice @Appear="Appear" ref="sort" title="排序" mark="sortMenu" :show="show" />
        <choice
          @Appear="Appear"
          right="none"
          ref="screen"
          title="筛选"
          mark="screenMenu"
          :show="show"
        />
      </div>
    </div>
    <div class="menu">
      <transition mode="out-in">
        <component
          :is="show"
          :type="type"
          :params="params"
          :num="num"
          @getList="getList"
          @Appear="Appear"
          @off="off"
          @addhead="function(data){$emit('addHead',data)} "
          @addnum="addnum"
        ></component>
      </transition>
    </div>
  </div>
</template>

<script>
//import mui from 'lib/mui/js/mui'
import choice from './Choice'
import typeMenu from './TypeMenu'
import sortMenu from './SortMenu'
import screenMenu from './ScreenMenu'
export default {
  components: {
    choice,
    typeMenu,
    sortMenu,
    screenMenu
  },
  props: ['title', 'type', 'params'],
  data() {
    return {
      show: null,
      show_dropDown: false, //控制下拉列表
      show_sort: false, //控制排序
      mask: null, //半透明遮罩层
      num: 0
    }
  },
  methods: {
    Appear(mark) {
      //如果列表已经显示,则隐藏并关闭遮罩层
      if (mark == this.show) {
        this.show = null
        this.mask.close()
      } else {
        //如果没有任何列表显示,则显示组件并打开遮罩层
        this.off()
        if (this.show == null) this.mask.show()

        this.show = mark
      }
    },
    getList(paramsObj) {
      //window.console.log(data)
      this.$emit('getList', paramsObj)
    },
    //没有参数则关闭当前打开的,有参数则按照参数关闭对应的
    //有个逻辑错误,一时找不出来
    off(off) {
      if (off) {
        if (off == 'typeMenu') this.$refs.type.off()
        if (off == 'sortMenu') this.$refs.sort.off()
        if (off == 'screenMenu') this.$refs.screen.off()
      } else {
        if (this.show == 'typeMenu') this.$refs.type.off(false)
        if (this.show == 'sortMenu') this.$refs.sort.off(false)
        if (this.show == 'screenMenu') this.$refs.screen.off(false)
      }
    },
    addnum(data) {
      this.num = data
    }
  },
  created() {
    import('lib/mui/js/mui').then(data => {
      this.mask = data.createMask(() => {
        this.off()
        this.show = null
      })
    })
  },
  beforeDestroy() {
    this.mask.close()
  }
}
</script>
<style  scoped>
.Maximal {
  border-bottom: 1px #f5f5f5 solid;
  padding: 0.5rem 0;
  background-color: white;
}
.Maximal > div {
  display: flex;
  width: 100%;
}
.menu {
  overflow: hidden;
}
.v-enter,
.v-leave-to {
  transform: translateY(-100%);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}
</style>